<template>
	<view>
		<div class="pageBg"></div>
		<uni-nav-bar title="精选短剧" left-icon="back" @clickLeft="$tab.back()" :fixed="true" :statusBar="true"
			:border="false" backgroundColor="transparent"></uni-nav-bar>

		<div class="px-20 mt-20">
			<div class="bg-FFF px-20" style="border-radius: 136rpx;">
				<u-search placeholder="请输入短剧名称" v-model="keyword" bgColor="#FFFFFF" @custom="refresh"></u-search>
			</div>

			<div class="px-20">
				<u-tabs :list="tabsList" :current="tabsIndex" lineWidth="30" lineColor="#FF540A" :activeStyle="{
				            color: '#FF540A',
				            fontWeight: 'bold',
				            transform: 'scale(1.05)'
				        }" :inactiveStyle="{
				            color: '#606266',
				            transform: 'scale(1)'
				        }" @click="tabClick">
				</u-tabs>
			</div>

			<view class="px-20 bg-FFF mt-32 round-24">
				<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
					<div class="video-list">
						<div class="w-full mt-32" v-for="(item,index) in shortVideoList" :key="item.id" @click="$tab.nav(`/pages/chat/shortPlay/detail?id=${item.id}`)">
							<div class="poster" :style="{
							background: `url(${globalConfig.imagePrefix}${item.icon}) no-repeat`,
							backgroundSize: '100% 100%'
						}">
								<image :src="`https://file.fulewanjia.com/fulewanjia/profile/appImages5/top${index+1}@2x.png`" mode="widthFix"
									style="width: 64rpx;"></image>
							</div>
							<div class="mt-12 font-500">
								{{item.name}}
							</div>
							<div class="" style="color: #999999;">
								{{item.status == '1' ? '已完结' : '连载中'}}·共{{item.totalMuster}}集
							</div>
						</div>
					</div>
				</s-pull-scroll>
			</view>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				tabsList: [],
				shortVideoList: [],
				tabsIndex:0,
				globalConfig:getApp().globalData.config
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			tabClick(e){
				this.tabsIndex = e.index
				this.refresh()
			},
			async getData() {
				const type = await this.$Api.common.typeChildrenAll({
					code: "duanju_type"
				})
				console.log(type)
				this.tabsList = [{
						id: "",
						name: "全部"
					},
					...type.data,
				]
				this.refresh()
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.shortVideoList = [];
					}
					
					const res = await this.$Api.shortPlay.shortPlayList({
						pageNum:pullScroll.page,
						pageSize:20,
						type:this.tabsList[this.tabsIndex].id,
						name:this.keyword
					})
					
					this.shortVideoList = this.shortVideoList.concat(res.rows);
					if (this.shortVideoList.length >= res.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			}
		}
	}
</script>

<style lang="scss">
	.pageBg {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages5/video_bg@2x.png) no-repeat;
		background-size: 100% 100%;
	}

	.video-list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12rpx;

		.poster {
			width: 100%;
			height: 292rpx;

		}
	}
</style>